<template>
	<view>
		<view class="rate">
			<view v-for="(item, index) in rates" :key="index">
				<text class="name">{{ item.name }}</text>
				<view class="score">
					<Drate :value="starVal" :margin="'2px'" @change="changeStar" @click.native="currentItem(item)"></Drate>
					<text v-show="item.comm <= 2">一般</text>
					<text v-show="item.comm >= 3 && item.comm <= 4 ">满意</text>
					<text v-show="item.comm == 5">超棒</text>
				</view>
			</view>
			<!-- <view>
				<text class="name">课程顾问GB  AMILY</text>
				<view class="score">
					<Drate :value="starVal" @change="changeStarTwo" :margin="'2px'"></Drate>
					<text v-show="StarTwo <= 2">一般</text>
					<text v-show="StarTwo >= 3 && StarTwo <= 4">满意</text>
					<text v-show="StarTwo == 5">超棒</text>
				</view>
			</view>
			<view>
				<text class="name">课程顾问GB  AMILY</text>
				<view class="score">
					<Drate :value="starVal" @change="changeStarThree" :margin="'2px'"></Drate>
					<text v-show="StarThree <= 2">一般</text>
					<text v-show="StarThree >= 3 && StarThree <= 4">满意</text>
					<text v-show="StarThree == 5">超棒</text>
				</view>
			</view> -->
		</view>
		<!--  评价 -->
		<view class="comment">
			<view class="uni-textarea">
				<textarea class="textarea" placeholder-style="color:#b3b3b3;" placeholder="表扬一下吧～"/>
				<text>剩余200字</text>
			</view>
		</view>
		<view style="margin: 50rpx 0;">
			<Dbutton :btnTxt="btnTxt"></Dbutton>
		</view>
	</view>
</template>

<script>
	import Dbutton from '../../components/button.vue'
	import Drate from '../../components/rate/d-rate/index.vue'
	export default {
		data() {
			return {
				starVal: 0,
				star: 0,
				btnTxt: '完成评价',
				rates: [
					{
						id: 1,
						name: '课程顾问GB  AMILY',
						comm: ''
					},
					{
						id: 2,
						name: '课程顾问GB  AMILY',
						comm: ''
					},
					{
						id: 3,
						name: '课程顾问GB  AMILY',
						comm: ''
					}
				]
			}
		},
		components: {
			Dbutton,
			Drate
		},
		onLoad() {
			
		},
		methods: {
			// 星星的值
			changeStar(e) {
				console.log(e)
				this.star = e - 0
			},
			currentItem(e) {
				console.log(e)
				e.comm = this.star
				console.log(this.rates) // 星星的值在这数组里面
			}
		}
	}
</script>

<style lang="scss">
	.rate {
		display: flex;
		flex-direction: column;
		padding: 59rpx 30rpx;
		view {
			display: flex;
			height: 76rpx;
			align-items: center;
			text {
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #7e7e7e;
				padding-left: 16rpx;
			}
		}
		.name {
			font-family: PingFangSC-Medium;
			font-size: 30rpx;
			color: #000;
			display: flex;
			flex: 1;
		}
	}
	.comment {
		width: 690rpx;
		height: 320rpx;
		margin: 0 auto;
		.uni-textarea {
			position: relative;
			.textarea {
				box-sizing: border-box;
				width: 690rpx;
				height: 320rpx;
				background-color: #fffbe6;
				border-radius: 2rpx;
				padding: 36rpx 40rpx;
			}
			text {
				position: absolute;
				bottom: 19rpx;
				right: 29rpx;
				font-family: PingFangSC-Regular;
				font-size: 20rpx;
				color: #b3b3b3;
			}
		}
		
	}
</style>
